<template>
  <div class="my-counter">
    <!-- 3.7减号，先判断，<=1时隐藏 -->
    <button type="button" class="btn btn-light" 
    :disabled='good.goods_count <=1'
    @click="good.goods_count--"
    >-</button>
    <!-- 3.5 数量v-model,数量不能<1-->
    <input v-model.number="good.goods_count" type="number" class="form-control inp" 
    @change='countChange'
    >
    <!-- 3.6.加号，点击事件 -->
    <button type="button" class="btn btn-light"
    @click="good.goods_count++"
    >+</button>
  </div>
</template>

<script>

export default {
  //3.4props引入good
  props:{
    good:Object
  },
  methods:{
    //3.5数量不能<1,当数量<1,就让他等于1
    countChange(){
      if(good.goods_count<1){
        good.goods_count=1
      }
    }
  }
}
</script>

<style lang="less" scoped>
.my-counter {
  display: flex;
  .inp {
    width: 45px;
    text-align: center;
    margin: 0 10px;
  }
  .btn, .inp{
    transform: scale(0.9);
  }
}
</style>